<template>
    <div class="admin-box1">
      <div>
         <el-form :model="formData" :rules="rules" size="medium" label-width="110px" ref="elForm" :disabled="ifFind" >
         <el-row :gutter="10">
           <el-col :span="9">
             <el-form-item label="虚拟主机名" prop="virtual_name">
              <el-input  v-model.trim="formData.virtual_name"  placeholder="请输入虚拟主机名" :style="{width: '300px'}" @input="virtualCode" />
             </el-form-item>
           </el-col>
           <el-col :span="9">
             <el-form-item label="服务器机房" prop="server_idc">
              <el-select  placeholder="服务器机房" v-model="formData.server_idc" :style="{width: '300px'}" >
                <el-option
                      v-for="(item, i) in server_idcenvOptions"
                      :key="i"
                      :label="item.item_name"
                      :value="item.item_value"
                ></el-option>
            </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="9">
             <el-form-item label="virtual_code" prop="virtual_code" >
              <el-input  v-model.trim="formData.virtual_code"  placeholder="虚拟主机号" :style="{width: '300px'}" :disabled="true"></el-input>
             </el-form-item>
          </el-col>
           <el-col :span="9">
             <el-form-item label="虚拟主机的ip" prop="ip_address">
              <el-input  v-model.trim="formData.ip_address"  placeholder="请输入虚拟主机的ip" :style="{width: '300px'}"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="9">
             <el-form-item label="虚拟主机管理用户" prop="user">
               <el-select  placeholder="管理用户" v-model="formData.user" :style="{width: '300px'}" >
              <el-option
                      v-for="(item, i) in userenvOptions"
                      :key="i"
                      :label="item.item_name"
                      :value="item.item_value"
              ></el-option>
            </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="9">
             <el-form-item label="虚拟主机密码" prop="password">
              <el-input  v-model.trim="formData.password"  placeholder="请输入虚拟主机的密码" :style="{width: '300px'}"></el-input>
             </el-form-item>
           </el-col>
<!--           <el-col :span="9">-->
<!--             <el-form-item label="使用时间" prop="onlineTime">-->
<!--              <div class="block">-->
<!--                  <el-date-picker type="date" placeholder="选择日期" v-model="formData.onlineTime" clearable :style="{width: '300px'}"></el-date-picker>-->
<!--              </div>-->
<!--             </el-form-item>-->
<!--           </el-col>-->
           <el-col :span="9">
             <el-form-item label="系统的端口号" prop="port">
              <el-input  v-model.trim="formData.port"  placeholder="系统的端口号" :style="{width: '300px'}"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="9">
             <el-form-item label="操作系统类型" prop="os_type">
              <el-select  placeholder="操作系统类型" v-model="formData.os_type" :style="{width: '300px'}" >
              <el-option
                      v-for="(item, i) in os_typeOptions"
                      :key="i"
                      :label="item.item_name"
                      :value="item.item_value"
              ></el-option>
            </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="9">
             <el-form-item label="操作系统的名" prop="os_system">
              <el-select  placeholder="操作系统的名" v-model="formData.os_system" :style="{width: '300px'}" >
                <el-option
                      v-for="(item, i) in os_systemenvOptions"
                      :key="i"
                      :label="item.item_name"
                      :value="item.item_value"
               ></el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="9">
             <el-form-item label="环境" prop="env_name">
             <el-select  placeholder="环境" v-model="formData.env_name" :style="{width: '300px'}" >
              <el-option
                      v-for="(item, i) in envOptions"
                      :key="i"
                      :label="item.item_name"
                      :value="item.item_value"
              ></el-option>
            </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="9">
                 <el-form-item label="xShell代理" prop="x_shell_proxy">
                     <el-select  placeholder="xShell代理" v-model="formData.x_shell_proxy" :style="{width: '300px'}" >
                         <el-option
                                 v-for="(item, i) in proxyOptions"
                                 :key="i"
                                 :label="item.item_name"
                                 :value="item.item_value"
                         ></el-option>
                     </el-select>
                 </el-form-item>
           </el-col>
           <el-col :span="9">
             <el-form-item label="cpu的核数" prop="cpu_num">
               <el-select  placeholder="cpu的核数" v-model="formData.cpu_num" :style="{width: '300px'}" >
                <el-option
                      v-for="(item, i) in cpu_numenvOptions"
                      :key="i"
                      :label="item.item_name"
                      :value="item.item_value"
               ></el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="9">
             <el-form-item label="内存" prop="mem_info">
              <el-select  placeholder="内存" v-model="formData.mem_info" :style="{width: '300px'}" >
              <el-option
                      v-for="(item, i) in  mem_infoenvOptions"
                      :key="i"
                      :label="item.item_name"
                      :value="item.item_value"
              ></el-option>
            </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="9">
             <el-form-item label="磁盘" prop="disk_space">
              <el-select  placeholder="磁盘" v-model="formData.disk_space" :style="{width: '300px'}" >
              <el-option
                      v-for="(item, i) in  disk_spaceenvOptions"
                      :key="i"
                      :label="item.item_name"
                      :value="item.item_value"
              ></el-option>
            </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="9">
             <el-form-item label="sshkey" prop="sshkey">
              <el-input  v-model="formData.sshkey"  placeholder="sshkey" :style="{width: '300px'}"></el-input>
             </el-form-item>
          </el-col>
           <el-col :span="9">
             <el-form-item label="项目"  prop="project_code_list">
               <el-select  placeholder="请选择项目" multiple filterable v-model="project_code_list" :style="{width: '300px'}" >
                  <el-option
                    v-for="(item, i) in getProjectOptions"
                    :key="i"
                    :label="item.project_fullname"
                    :value="item.project_code"
                  ></el-option>
               </el-select>
             </el-form-item>
          </el-col>
           <el-col :span="9">
             <el-form-item label="公司" prop="company_code">
               <el-select  placeholder="请选择公司" v-model="formData.company_code" :style="{width: '300px'}" >
                  <el-option
                    v-for="(item, i) in companyOptions"
                    :key="i"
                    :label="item.company_name"
                    :value="item.company_code"
                  ></el-option>
              </el-select>
             </el-form-item>
          </el-col>
         </el-row>
        </el-form>
      </div>

       <div class="dialog-footer" slot="footer">
          <el-button @click="closeDialog1">取 消</el-button>
          <el-button @click="enterDialog1" type="primary">确 定</el-button>
        </div>
    </div>
</template>

<script>
   import {
    getServerList,
    createServer,
    getServerById,
    updateServer
   } from "@/api/cmdb_server";
   import { getProjectList  }  from "@/api/cmdb_project";
   import { getCompany } from "@/api/company";
   import { formatTimeToStr } from '@/utils/date'
   import infoList from '@/mixins/infoList'
    export default {
    name: "virtualDetail",
    mixins: [infoList],
    data(){
      return {
        listApi: getServerList,
        title:"添加",
        getServerOptions:[],
        statusOptions:[],
        envOptions:[],
        os_typeOptions:[],
        cpu_numenvOptions:[],
        os_systemenvOptions:[],
        mem_infoenvOptions:[],
        disk_spaceenvOptions:[],
        userenvOptions:[],
        server_idcenvOptions:[],
        companyOptions:[],
        getProjectOptions:[],
        proxyOptions:[],
        value3: '',
        value: '',
        res: '',
        opType: '',
        ifFind: false,
        formData: {
          //ID: 0,   // id primarykey
          status: true,
          virtual_code: "",
          virtual_name: "",
          server_idc: "",
          ip_address: "",
          user: "",
          password: "",
          onlineTime: "",
          sshkey: "wu",
          port: "22",
          os_system: "",
          os_type: "",
          env_name: "",
          cpu_num: "",
          mem_info: "",
          disk_space: "",
          x_shell_proxy:"",
          company_code: "",
          project_code: "",
        },
        project_code_list:[],
        rules: {
          virtual_code: [{ required: true, message: '请输入虚拟主机code', pattern: /^[a-z|0-9|-]*$/,trigger: 'blur' }],
          virtual_name: [{ required: true, message: '请输入虚拟主机名', pattern: /^[a-z|0-9|-]*$/,trigger: 'blur' }],
          server_idc:[{ required: true, message: "请输入服务器机房", trigger: "blur" }],
          ip_address:[{ required: true, message: "请输入服务器ip地址", trigger: "blur" }],
          user:[{ required: true, message: "请输入服务器管理用户", trigger: "blur" }],
          password:[{ required: true, message: "请输入服务器用户的密码", trigger: "blur" }],
          onlineTime:[{ required: true, message: "请输入上线时间", trigger: "blur" }],
          os_system:[{ required: true, message: "请输入操作系统", trigger: "blur" }],
          env_name:[{ required: true, message: "请输入环境名", trigger: "blur" }],
          cpu_num:[{ required: true, message: "请输入内核", trigger: "blur" }],
          disk_space:[{ required: true, message: "请输入磁盘大小", trigger: "blur" }],
          mem_info:[{ required: true, message: "请输入内存", trigger: "blur" }],
          company_code:[{ required: true, message: "请输入公司", trigger: "blur" }],
          project_code:[{ required: true, message: "请输入项目", trigger: "blur" }],
          x_shell_proxy:[{ required: true, message: "请选择代理", trigger: "blur" }],

        },
      }
    },
    methods: {
      GetIdServerby(id){
        getServerById({id: parseInt(id)}).then(res => {
          if (res.code == 0) {
            this.formData = res.data.recmdbServers
            this.project_code_list = this.formData.project_code.split(",")
          }
          })
      },
      closeDialog1(){
         this.$router.push({path: '/layout/cmdb/virtual'})
      },
      async enterDialog1(){
        if (this.opType == 'edit') {
          const res = await updateServer(this.formData)
          if (res.code == 0) {
              this.$message({
              type: 'success',
              message: '修改成功',
            })
            this.$router.go(-1)}
          } else if(this.opType == 'find') {
              this.$router.push({path: '/layout/cmdb/virtual'})
          }else {
            getServerList({'page':1,'pageSize': 9999,'virtual_name': this.formData.virtual_name}).then(response => {
                  this.getServerOptions = response.data.total;
                  if (this.getServerOptions == 0) {
                    this.getNewData()
                  }else{
                       this.$message({
                             type: 'warning',
                             message: '虚拟主机的code和name重复，请重新换一个',
                             })
                        }
                   //this.$router.push({path: '/layout/cmdb/virtual'})
            })

          }
      },
      async getNewData() {
        const res = await createServer(this.formData)
        console.log(res)
        if (res.code == 0) {
          this.$message({
            type: 'success',
            message: '创建成功',
          })
          this.$router.push({path: '/layout/cmdb/virtual'})
        }
      },
      virtualCode() {
        this.formData.virtual_code = this.formData.virtual_name
      }
    },
    async created() {
      const id = this.$route.query.id
      this.opType = this.$route.query.type
      if (this.opType == 'edit') {
        this.GetIdServerby(id)
      }
      if (this.opType == 'find') {
         this.ifFind = true
         this.GetIdServerby(id)
      }
      await this.getTableData();
      this.statusOptions = this.getDicItemList('sys_common_status')
      this.envOptions = this.getDicItemList('env_name')
      this.os_typeOptions= this.getDicItemList('os_type')
      this.cpu_numenvOptions = this.getDicItemList('cpu_num')
      this.os_systemenvOptions = this.getDicItemList('os_system')
      this.mem_infoenvOptions = this.getDicItemList('mem_info')
      this.disk_spaceenvOptions = this.getDicItemList('disk_space')
      this.userenvOptions = this.getDicItemList('system_user')
      this.server_idcenvOptions = this.getDicItemList('server_idc')
      this.proxyOptions = this.getDicItemList('ssh_connect_proxy')
       // 获取公司列表
      getCompany().then(response => {
        this.companyOptions = response.data.companyList;
      });

      getProjectList({'page':1,'pageSize': 100}).then(response => {
        this.getProjectOptions = response.data.list;
      })

    },
    filters: {
      formatDate: function(time) {
      if (time != null && time != '') {
        let date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }

    },
    formatBoolean: function(s) {
        if (s == "1" ) {
          return true
        } else {
          return false;
        }
    },
  },
    watch: {
      project_code_list(val) {
        this.formData.project_code = val.join(",")
      }
    }
}
</script>

<style  scoped lang="scss" >
  .dialog-footer {
   text-align: center;
   .el-button {
     margin-right:80px;
   }
  }
</style>
